import { translateItem as props } from '@/View/LeftView/interface';
import store from '@/store';
import React from 'react';
import styled from 'styled-components';

const Layout = styled.div`
  font-size: 1rem;
  /* grid-template-columns: auto auto auto; */
  display: grid;
  grid-template-columns: auto auto auto;
  user-select: none;
  :hover {
    cursor: pointer;
    background-color: red;
  }
`;

const TranslateItem: React.FC<props> = React.memo((props) => {
  return (
    <Layout
      onClick={() => {
        store.store.currentTranslateItem = {
          textKey: props.textKey,
          textValue: props.textValue,
          isComplete: props.isComplete,
        };
      }}
    >
      <div>{props.textKey}</div>
      <div>{props.textValue}</div>
    </Layout>
  );
});
export default TranslateItem;
